<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org" lang="en">

<head th:replace="fragments/headTag :: headTag">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Spreadsheet Template Builder App</title>

<!-- Bootstrap -->
<link
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"
	th:href="@{/webjars/bootstrap/3.0.3/css/bootstrap.css}"
	rel="stylesheet" />
<link href="../../../resources/css/navbar.css"
	th:href="@{/resources/css/navbar.css}" rel="stylesheet" />
<!-- JQuery -->
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
	th:src="@{/webjars/jquery/1.9.0/jquery.min.js}"></script>
<script
	src="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"
	th:src="@{/webjars/bootstrap/3.0.3/js/bootstrap.min.js}"></script>

<!-- Spring JS and Ajax -->
<script type="text/javascript" th:src="@{/resources/dojo/dojo.js}"></script>
<script type="text/javascript" th:src="@{/resources/spring/Spring.js}"></script>
<script type="text/javascript"
	th:src="@{/resources/spring/Spring-Dojo.js}"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<div th:include="fragments/bodyHeader :: bodyHeader" th:remove="tag">This
			is the navigation bar here</div>
		<ol class="breadcrumb">
			<li th:text="#{breadcrumbs.template}">Template Selection</li>
			<li class="active" th:text="#{breadcrumbs.metadata}">Metadata
				Schema Configuration</li>
			<li th:text="#{breadcrumbs.metadataElements}">Metadata Elements
				Selection</li>
			<li th:text="#{breadcrumbs.review}">Review and Generate</li>
		</ol>
		<div class="row">
			<!-- DIV SIDE COLUMN -->
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{metadata.schema.side.title}" class="panel-title">Active
							Metadata Schemas</h3>
					</div>
					<div class="panel-body">
						<div
							th:if="${flowRequestContext.messageContext.hasErrorMessages()}">
							<b
								th:each="message : ${flowRequestContext.messageContext.getAllMessages()}"
								style="color: red;" th:text="${message.text}"></b>
						</div>
						<div th:if="${selectedSchemas.size() > 0}">
							<form id="elimMD" method="post">
								<p th:text="#{metadata.schema.delete.text}">To delete
									Metadata schemas that will be included in the spreadsheet just
									tick the checkbox(es) and press "Delete"</p>
								<div class="row" th:if="${!elem.isRemoved()}"
									th:each="elem : ${selectedSchemas}">
									<div class="col-lg-12">
										<div class="input-group">
											<!-- label-primary -->
											<span class="input-group-addon label-primary"> <input
												th:name="${selectedSchemas.indexOf(elem)}" type="checkbox" />
											</span> <input th:value="${elem.prefix + ' - ' + elem.readableName}"
												type="text" class="form-control" readonly="readonly" />
										</div>
										<br />
										<!-- /input-group -->
									</div>
									<!-- /.col-lg-6 -->
								</div>
								<input type="hidden" name="elimList" value="" /> <input
									class="btn btn-primary" type="submit"
									onclick='javascript:eliminateElements("elimMD")'
									name="_eventId_elimMD"
									th:value="#{metadata.schema.delete.submit}" />
							</form>
						</div>
						<p th:unless="${selectedSchemas.size() > 0}"
							th:text="#{metadata.schema.noschema}">No Metadata Schema has
							been selected yet</p>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 th:text="#{metadata.schema.title}" class="panel-title">Configure
							the metadata schemas</h3>
					</div>
					<div class="panel-body">
						<p th:text="#{metadata.schema.text1}">First select a Metadata
							Schema from the dropdown list. A new page will show the elements
							included in the selected schema.</p>
						<form id="metadataSelection" th:action="${flowExecutionUrl}"
							class="form-horizontal" th:object="${mdSchemaInstance}"
							method="post">
							<fieldset>
								<legend th:text="#{metadata.schema.text2}">Select a
									metadata schema from the list</legend>
								<div class="form-group">
									<label class="col-md-4 control-label" for="mdselect"><span
										th:text="#{form.metadata.schema.prefix}">Metadata
											Schema</span></label>
									<div class="col-md-8">
										<div class="input-group">
											<select th:size="${selectedSchemas.size()}" name="prefix"
												class="form-control">
												<option th:each="schemaElem : ${selectedSchemas}"
													th:onclick="'javascript:setRname(\'metadataSelection\',\'' + ${schemaElem.readableName} + '\');'"
													th:value="${schemaElem.prefix}"
													th:text="${schemaElem.prefix + ' - ' + schemaElem.readableName}"
													th:selected="${schemaElem.prefix == 'dc'}"></option>
											</select> <input type="hidden" name="rName" value="" />
										</div>
									</div>
								</div>
								<div class="form-group">
									<label class="col-md-4 control-label" for="elementSubmit"><span></span></label>
									<div class="col-md-4">
										<button class="btn btn-primary" type="submit" id="elementSubmit"
											name="_eventId_addElements"
											th:attr="data-content=#{form.metadata.schema.elements.tooltip}"
											data-toggle="popover" th:text="#{form.metadata.schema.elements}"></button>
									</div>
								</div>
							</fieldset>
							<button class="btn btn-danger" type="submit"
								id="back" name="_eventId_cancel"
								th:attr="data-content=#{form.metadata.schema.tooltip.back}"
								data-toggle="popover" th:text="#{form.metadata.schema.back}">&laquo; Back to intro</button>
							<button class="btn btn-primary pull-right" type="submit" id="generateSubmit"
								name="_eventId_genSpreadsheet"
								th:attr="data-content=#{form.metadata.schema.tooltip.submit}"
								data-toggle="popover" th:text="#{form.metadata.schema.submit}">Create template &raquo;</button>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!-- CONTAINER -->
		<div id="footer" th:include="fragments/footer :: footer"></div>
	</div>
	<script>
		$(document).ready(function() {
			/*Tooltips*/
			$('[data-toggle="tooltip"]').tooltip({
				'placement' : 'top'
			});

			$('[data-toggle="popover"]').popover({
				trigger : 'hover',
				'placement' : 'top'
			});
		});
	</script>
</body>
</html>